<template>
  <div class="orderControl">
    <!-- 订单管理 -->
    <div class="consumerList">
      <div class="chooseContainer padding-box">
        <el-form ref="searchKey" :model="searchKey" :rules="rules" label-width="80px" :inline="true" style="margin-top:20px;">
          <el-form-item label="空间名称" prop="spaceName">
            <!-- <el-input placeholder="请输入空间名称" v-model="searchKey.spaceName"></el-input> -->
            <el-autocomplete v-model="searchKey.spaceName" :fetch-suggestions="querySearchAsync" @select="handleSelect" placeholder="请输入空间名称">
            </el-autocomplete>
          </el-form-item>
          <el-form-item label="订单编号" prop="orderNum">
            <el-input placeholder="请输入订单编号" v-model="searchKey.orderNum"></el-input>
          </el-form-item>
          <el-form-item label="订单状态" prop="status">
            <el-select v-model="searchKey.status" class="chooseBox" filterable placeholder="请选择订单状态" clearable>
              <el-option v-for="item in statusList" :key="item.value" :label="item.text" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="客户姓名" prop="userName">
            <el-input placeholder="请输入客户姓名" v-model="searchKey.userName"></el-input>
          </el-form-item>
          <el-form-item label="客户电话" prop="userTel">
            <el-input placeholder="请输入客户电话" v-model="searchKey.userTel"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="searchOrder">搜索</el-button>
            <el-button @click="searchClear('searchKey')">重置</el-button>
            <!-- <el-button @click="exportOrder">导出订单</el-button> -->
          </el-form-item>
        </el-form>
        <div class="btnBox">
        </div>
      </div>
      <div class="padding-box">
        <el-table :data="orderData" style="width: 100%" v-loading="loadingTable" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.2)" empty-text="没有搜索到相关订单">
          <el-table-column prop="orderNum" label="订单编号" align="center">
          </el-table-column>
          <!-- <el-table-column prop="type" label="订单类型" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.type === 1">普通订单</span>
              <span v-if="scope.row.type === 2">特价订单</span>
              <span v-if="scope.row.type === 3">活动订单</span>
            </template>
          </el-table-column> -->
          <el-table-column prop="createTime" label="下单日期" align="center">
          </el-table-column>
          <!-- <el-table-column prop="payTime" label="付款时间" align="center">
          </el-table-column> -->
          <el-table-column prop="userName" label="客户姓名" align="center">
          </el-table-column>
          <el-table-column prop="userTel" label="手机号" align="center">
          </el-table-column>
          <!-- <el-table-column prop="distributors" label="分销商" align="center">
            <template slot-scope="scope">
              <div v-if="scope.row.distributors === '1'" style="width:60px;margin:0 auto;">
                <span>方寸</span>
              </div>
              <div v-if="scope.row.distributors === '2'" style="width:60px;margin:0 auto;">
                <span>商家</span>
              </div>
            </template>
          </el-table-column> -->
          <el-table-column prop="storeName" label="分销商" align="center">
          </el-table-column>
          <el-table-column prop="spaceName" label="空间名称" align="center">
          </el-table-column>
          <el-table-column prop="spaceTitle" label="产品内容" align="center">
          </el-table-column>
          <el-table-column label="有效期" align="center" prop="shootValidity">
          </el-table-column>
          <el-table-column label="支付方式" align="center">
            <template slot-scope="scope">
              <div v-if="scope.row.payType === '1'" style="width:60px;margin:0 auto;">
                <span>账号余额</span>
              </div>
              <div v-if="scope.row.payType === '2'" style="width:60px;margin:0 auto;">
                <span>支付宝</span>
              </div>
              <div v-if="scope.row.payType === '3'" style="width:60px;margin:0 auto;">
                <span>微信支付</span>
              </div>
              <div v-if="scope.row.payType === '12'" style="width:60px;margin:0 auto;">
                <span>账号余额加支付宝</span>
              </div>
              <div v-if="scope.row.payType === '13'" style="width:60px;margin:0 auto;">
                <span>账号余额加微信</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="payMoney" label="订单金额" align="center">
          </el-table-column>
          <el-table-column prop="brokerage" label="分销佣金" align="center">
          </el-table-column>
          <el-table-column prop="status" label="订单状态" align="center">
            <template slot-scope="scope">
              <div v-if="scope.row.status === '0'" style="width:60px;margin:0 auto;">
                <span>未付款</span>
              </div>
              <div v-if="scope.row.status === '5'" style="width:60px;margin:0 auto;">
                <span>已取消</span>
              </div>
              <div v-if="scope.row.status === '42'" style="width:60px;margin:0 auto;">
                <span>未使用</span>
              </div>
              <div v-if="scope.row.status === '43'" style="width:60px;margin:0 auto;">
                <span>部分使用</span>
              </div>
              <div v-if="scope.row.status === '44'" style="width:60px;margin:0 auto;">
                <span>已使用</span>
              </div>
              <div v-if="scope.row.status === '45'" style="width:60px;margin:0 auto;">
                <span>已失效</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作" min-width="80" align="center">
            <template slot-scope="scope">
              <el-button type="text" size="mini" v-if="scope.row.status === '42' || scope.row.status === '43' || scope.row.status === '44' || scope.row.status === '45'" @click="cancel(scope.row)">核销</el-button>
              <el-button type="text" @click="seeDetail(scope.row)" size="mini">查看详情</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="pageContainer" style="padding-bottom:30px">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="this.pageSizeArray" :page-size="this.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="this.total">
          </el-pagination>
        </div>
      </div>
    </div>
    <version></version>
  </div>
</template>
<script type="text/ecmascript-6">
// import { pageCommon } from '@/assets/js/mixin'
import version from '@/base/version/version'
import { mapGetters } from 'vuex'
export default {
  name: 'orderControl',
  components: {
    version
  },
  // mixins: [pageCommon],
  data () {
    return {
      pageSizeArray: [10, 20, 30, 40, 50],
      pageNo: 1,
      pageSize: 10,
      pageTotal: null,
      total: 0,
      loadingTable: true,
      isShowPage: true,
      statusList: [
        {
          text: '未付款',
          value: 0
        },
        {
          text: '已取消',
          value: 5
        },
        {
          text: '未使用',
          value: 42
        },
        {
          text: '部分使用',
          value: 43
        },
        {
          text: '已使用',
          value: 44
        },
        {
          text: '已失效',
          value: 45
        }
      ],
      searchKey: {
        spaceName: '',
        userName: '',
        userTel: '',
        status: '',
        orderNum: ''
      },
      orderData: [
      ],
      rules: {}
    }
  },
  created () {
    this.role = this.userInfo.roleId
    if (!this.noReadayLoading) {
      this.searchBtn()
    }
  },
  watch: {
    pageSize (newVal, oldVal) {
      if (this.pageTotal > newVal) {
        this.searchBtn()
        return false
      }
      if (this.pageTotal < oldVal) {
        return false
      }
      this.searchBtn()
    },
    total (val) {
      if (val === 1) {
        this.isShowPage = false
      } else {
        this.isShowPage = true
      }
    }
  },
  computed: {
    ...mapGetters([
      'userInfo'
    ])
  },
  methods: {
    // 修改每页显示的数据数目
    handleSizeChange (val) {
      this.pageSize = val
      this.searchBtn()
    },
    // 设置pageNo
    handleCurrentChange (val) {
      this.pageNo = val
      this.searchBtn()
    },
    cancel (row) {
      this.$router.push({ name: 'distributionControl/distributionPresale', query: { id: row.id } })
    },
    seeDetail (row) {
      console.log(row.id)
      this.$router.push({ name: 'distributionControl/distributionDetail', query: { id: row.id } })
    },
    querySearchAsync (queryString, callback) {
      let spaceNameList = []
      this.$axios.post('/api/activity/spaceMind',
        {
          userId: this.userInfo.userId,
          spaceName: this.searchKey.spaceName
        }).then((response) => {
        const res = response.data
        if (res.code === '00000000') {
          let arr = res.data
          // console.log(arr)
          for (let i of arr) {
            i.value = i.spaceName // 将想要展示的数据作为value
          }
          spaceNameList = arr
          callback(spaceNameList)
        }
      }).catch((error) => {
        console.log(error)
      })
    },
    handleSelect (item) {
      // console.log(item)
    },
    searchBtn () {
      this.$axios.post('/api/activity/showActivityOrdersByCondition',
        {
          userId: this.userInfo.userId,
          spaceName: this.searchKey.spaceName,
          userName: this.searchKey.userName,
          userTel: this.searchKey.userTel,
          status: this.searchKey.status,
          orderNum: this.searchKey.orderNum,
          pageSize: this.pageSize,
          pageNo: this.pageNo
        }
      ).then(response => {
        const res = response.data
        if (res.code === '00000000') {
          this.loadingTable = false
          let arr = res.data.activities
          // console.log(arr)
          let orderList = []
          for (let i = 0; i < arr.length; i++) {
            orderList.push({
              id: arr[i].id,
              createTime: arr[i].createTime,
              payTime: arr[i].payTime,
              orderNum: arr[i].orderNum,
              payType: arr[i].payType,
              payMoney: arr[i].payMoney,
              spaceName: arr[i].spaceName,
              status: arr[i].status,
              storeName: arr[i].storeName,
              userName: arr[i].userName,
              userTel: arr[i].userTel,
              distributors: arr[i].distributors,
              spaceTitle: arr[i].spaceTitle,
              brokerage: arr[i].brokerage,
              shootValidity: arr[i].shootValidity
            })
          }
          this.orderData = [...orderList]
          this.total = res.data.total
        }
      })
    },
    searchOrder () {
      this.$axios.post('/api/activity/showActivityOrdersByCondition',
        {
          userId: this.userInfo.userId,
          spaceName: this.searchKey.spaceName,
          userName: this.searchKey.userName,
          userTel: this.searchKey.userTel,
          status: this.searchKey.status,
          orderNum: this.searchKey.orderNum,
          pageSize: this.pageSize,
          pageNo: 1
        }
      ).then(response => {
        const res = response.data
        if (res.code === '00000000') {
          this.loadingTable = false
          let arr = res.data.activities
          // console.log(arr)
          let orderList = []
          for (let i = 0; i < arr.length; i++) {
            orderList.push({
              id: arr[i].id,
              createTime: arr[i].createTime,
              payTime: arr[i].payTime,
              orderNum: arr[i].orderNum,
              payType: arr[i].payType,
              payMoney: arr[i].payMoney,
              spaceName: arr[i].spaceName,
              status: arr[i].status,
              storeName: arr[i].storeName,
              userName: arr[i].userName,
              userTel: arr[i].userTel,
              distributors: arr[i].distributors,
              spaceTitle: arr[i].spaceTitle,
              brokerage: arr[i].brokerage,
              shootValidity: arr[i].shootValidity
            })
          }
          this.orderData = [...orderList]
          this.total = res.data.total
        }
      })
    },
    searchClear (searchKey) {
      this.$nextTick(() => {
        if (this.$refs[searchKey] !== undefined) {
          this.$refs[searchKey].resetFields()
        }
        this.searchBtn()
      })
    },
    exportOrder () { }
  }
}
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
@import '../../../../assets/stylus/variable'
.chooseContainer
  background $bg-normal
  overflow hidden
  display flex
  width 100%
  padding $spacing
  padding-bottom 20px
  flex-wrap wrap
  box-sizing border-box
  .chooseBox
    flex 0 0 224px
    margin-right $spacing
    margin-bottom $spacing
</style>
